import React, {
  Component,
  useReducer,
  useState,
  useMemo,
  memo,
  createContext,
  useContext,
  useCallback,
} from "react";
/* 
  useCallback
  作用：在组件多次重新渲染的时候 缓存函数
*/
const Input = memo(function Input({ onChange }) {
  console.log("子组件重新渲染了");
  return <input type="text" onChange={(e) => onChange(e.target.value)}></input>;
});
export default function UseRedu() {
  const changeHandler = useCallback((value) => console.log(value), []);
  const [count, setCount] = useState(0);
  return (
    <>
      <h3>useCallback</h3>
      <Input onChange={changeHandler}></Input>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </>
  );
}
